<template>
  <div class="login-container">
    <video
      src="../../assets/video/bgcVideo.mp4"
      autoplay="autoplay"
      loop
      muted
    ></video>
    <div class="form">
      <div class="logo">
        <img src="../../assets/common/logo1.png" alt="神领物流" />
      </div>
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <!-- el-form > el-form-item > el-input -->
        <el-form
          :model="loginForm"
          :rules="formRules"
          ref="loginForm"
          @submit.native.prevent
        >
          <el-form-item prop="account">
            <el-input
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
              v-model="loginForm.account"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-unlock"
              v-model="loginForm.password"
              show-password
            />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              placeholder="验证码"
              prefix-icon="el-icon-success"
              v-model="loginForm.code"
            >
            </el-input>
            <img
              :src="imgURL"
              alt=""
              class="imgcode"
              @click="imageCodeDebounce()"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn"
              style="width: 350px"
              type="primary"
              @click="submit"
              native-type="submit"
              >登录</el-button
            >
          </el-form-item>
          <div class="el-form-content">
            仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
          </div>
        </el-form>
      </el-card>
    </div>
    <div class="footer">
      <span>江苏传智播客教育科技股份有限公司</span>
      <span>版权所有Copyright 2006-2022 All Rights Reserved</span>
      <span>苏ICP备16007882号-11</span>
    </div>
  </div>
</template>
<script>
import { getImageCode } from "@/api/user";
import { Message } from "element-ui";
import debounce from "lodash/debounce";
export default {
  name: "Login",
  created() {
    this.getImageCode();
  },
  data() {
    return {
      imgURL: "",
      loginForm: {
        account: process.env.NODE_ENV === "development" ? "demo" : "",
        password: process.env.NODE_ENV === "development" ? "hm#qd@23!" : "",
        code: "",
        key: Math.random(),
      },
      formRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: "用户名不能为空",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "密码不能为空",
          },
          {
            trigger: "blur",
            min: 6,
            max: 16,
            message: "密码长度为6-16位",
          },
        ],
        code: [
          {
            required: true,
            trigger: "blur",
            message: "验证码不能为空",
          },
        ],
      },
    };
  },
  methods: {
    async submit() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 检验成功
          // 发请求获得token，即调用actions中login异步方法
          // this.loginForm作为参数传，也作为请求的数据 即payload
          await this.$store.dispatch("user/login", this.loginForm);
          // 请求成功后有token跳转主页
          // this.$router.push("/");
          await this.$router.push(this.$route.query.redirect || "/");
          Message.success("登陆成功");
        } /* else {
          // 刷新验证码
          // this.getImageCode();
        } */
      }, this.imageCodeDebounce());
    },
    async getImageCode() {
      // 调用请求里面的方法
      const result = await getImageCode({ key: this.loginForm.key });
      const fr = new FileReader();
      fr.onload = (event) => {
        this.imgURL = event.target.result;
      };
      fr.readAsDataURL(result); //异步
      console.log(result);
    },
    imageCodeDebounce: debounce(function () {
      this.getImageCode();
    }, 1000),
  },
};
</script>
<style lang="scss">
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .form {
    position: absolute;
    width: 390px;
    height: 390px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    background-color: #fff;
    .logo {
      width: 390px;
      height: 80px;
      padding-left: 120px;
      padding-top: 20px;
      img {
        width: 50%;
        height: 50px;
      }
    }
    .btn {
      font-size: 18px;
      font-weight: 700;
      background-color: #e15536;
      color: #ffffff;
      border-color: #e15536;
    }
    .imgcode {
      position: absolute;
      width: 71px;
      height: 35px;
      right: 1px;
      top: 2px;
    }
    .el-card {
      border: none;
      padding: 0;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #ffffff;
      }
    }

    .el-form-content {
      color: #ff0000;
      line-height: 30px;
      font-size: 13px;
    }
  }
  .footer {
    position: absolute;
    left: 320px;
    bottom: 30px;
    z-index: 2;
    // text-align: center;
    font-size: 16px;
    color: #eff0f3;
    span {
      margin-right: 5vw !important;
    }
  }
}
</style>
